<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	1. 两边固定, 中间自适应
        	2. 当中列要完整显示
        	3. 当中列要优先加载
       -->
       
       <!--
       	浮动: 搭建完整的布局结构
       	margin 为赋值: 调整旁边两列的位置, 使三列布局到一行上
       	使用相对定位: 调整旁边两列的位置, 使两列位置调整到两头
       -->
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.header, .footer{
				width: auto;
				height: 100px;
				background: yellow;
			}
			.box{
				min-width: 600px;
				padding: 0 200px;
				overflow: hidden;
			}
			.box1,.box2,.box3{
				padding-bottom: 10000px;
				margin-bottom: -10000px;
			}
			.box1{
				position: relative;
				left: -200px;
				float:left;
				margin-left: -100%;
				width: 200px;
				background-color: pink;
			}
			.box2{
				float: left;
				width: 100%;
				background-color: deeppink;
			}
			.box3{
				position: relative;
				right: -200px;
				float: left;
				margin-left: -200px;
				width: 200px;
				background-color: pink;
			}
			.clearfix{
				*zoom: 1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="box clearfix">
			<div class="box2">box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br />box2<br /></div>
			<div class="box1">box1</div>
			<div class="box3">box3</div>
		</div>
		<div class="footer"></div>
	</body>
</html>
